<!--DROP THIS FILE INTO YOUR BROWSER TO PREVIEW THE EFFECT-->
<!DOCTYPE html>
<html>

<head>
  <!--ADDITTONAL LINKS TO MAKE THE EXAMPLES LOOK PRETTY-->
  <!-- Bootstrap core CSS for better functionality-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css" rel="stylesheet" />


  <!-- CORE FILES FOR PERFECT SCROLLBAR FUNCTIONALITY -->
  <!-- The Perfect Scrollbar CSS files -->
  <link href="../css/perfect-scrollbar.css" rel="stylesheet">
  <!-- The Perfect Scrollbar JS files -->
  <script src="../dist/perfect-scrollbar.js"></script>

  <!--DEFINE CONTAINER-->
  <style>
    body {
      background-color: rgba(247, 247, 247, 0.801);
    }

    #container {
      background-color: rgb(255, 255, 255);
      height: 400px;
      width: 100%;
      overflow: auto;
      margin: 100px auto;
      position: relative;
    }

    .entryPlaceholder {
      height: 48px;
      width: 100%;
    }

  </style>

</head>

<body>
  <!--EXAMPLE CONTENT-->
  <section class="text-center">
    <br>
    <h1>Infinite scroll</h1>
    <p class="lead mt-4 mb-5">You can preview the effect offline below or <strong>fork ready to use template</strong> of
      this
      example.</p>


    <a class="btn btn-lg btn-info ripple-surface mx-4" data-mdb-ripple-color="dark"
      style="background-color:hsl(195, 53%, 48%) !important;" href="https://perfectscrollbar.com/"><i
        class="fas fa-book mx-2"></i>DOCUMENTATION</a>
    <a class="btn  btn-link btn-lg ripple-surface mx-4" data-mdb-ripple-color="dark"
      style="color:hsl(195, 83%, 25%) !important;" href="https://github.com/mdbootstrap/perfect-scrollbar"><i
        class="fab fa-github me-2"></i>GITHUB</a>
    <a class="btn btn-lg btn-link ripple-surface mx-4" data-mdb-ripple-color="dark"
      style="color: hsl(195, 93%, 38%) !important;"
      href="https://www.youtube.com/watch?v=Ro1x0zYUwwA&list=PLl1gkwYU90QlfX9oIJvC4JJKaucei7Hx8&index=12&ab_channel=Keepcoding"><i
        class="fab fa-youtube me-2"></i> Tutorials</a>
    <a class="btn btn-lg btn-link ripple-surface mx-4" data-mdb-ripple-color="dark"
      style="color: hsl(195, 43%, 38%) !important;" href="https://mdbgo.com/"><i class="fas fa-server me-2"></i> Free
      Hosting</a>
    <a class="btn btn-lg btn-outline-info mx-4"
      href="https://mdbootstrap.com/snippets/standard/adamjakubowski/3589854?utm_campaign=PS&utm_source=Package"><i
        class="fas fa-code me-2"></i>TEMPLATE</a>
    <div class="d-flex justify-content-center mt-5 mb-5">
      <div class="alert my-3" role="alert" data-mdb-color="light" style="border: hsl(195, 53%, 48%) 1px solid ;">
        <p class="font-weight-bold">Get Free Material Design for Bootstrap 5</p>
        <hr>
        <p>Material Design 2.0 + latest Bootstrap 5 based on plain JavaScript. 700+ material UI components, super
          simple, 1 minute installation, free templates &amp; much more</p>
        <a type="button" href="https://mdbootstrap.com/docs/standard/" class="btn btn-outline-info  mt-3"
          style="color: hsl(195, 43%, 38%); border-color:  hsl(195, 43%, 38%);" role="button"
          data-mdb-ripple-color="dark">Free Download</a>
      </div>
    </div>
    <hr>

    <br>
    <div id="container" class="w-50">
    </div>

  </section>
  <!--EXAMPLE CONTENT-->

  <!--ADDITTONAL SCRIPTS TO MAKE THE EXAMPLE CONTENT LOOK PRETTY-->
  <section>
    <!--jQuery-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>

    <!-- MDB core JavaScript -->
    <!-- MDB -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js"></script>
    </script>

    <!--ADD PERFECT SCROLLBAR & INFINITE SCROLL TO CONTAINER-->
    <script>
      var $ = document.querySelector.bind(document);

      var x = 0;

      function addEntries() {
        for (var i = 0; i < 10; i++) {
          $('#container').innerHTML +=
            '<div class="entryPlaceholder">I love <a href="https://mdbootstrap.com?utm_campaign=PS&utm_source=Package">Material Design</a> #' +
            (x++) + '</div>';
        }
      }

      addEntries();
      var ps = new PerfectScrollbar('#container');

      $('#container').addEventListener('ps-y-reach-end', function () {
        addEntries();
        ps.update();
      });

    </script>

  </section>
  <!-- Footer -->
  <footer class="text-white d-block shadow-5" style="background-color: #aedff5;">

    <!-- Copyright -->
    <div class="row pt-3 px-3 w-100">
      <div class="col-md-4 d-md-block d-none">
        <p class="text-primary ms-3">Project maintained by
          <a href="https://mdbootstrap.com/?utm_campaign=PS&utm_source=Package"><img class="align-self-top"
              style="height:20px;" src="https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png"></a></p>
      </div>
      <div class="text-center text-primary col-md-8 col-lg-4">
        <p>Docs & Examples made pretty with
          <a href="https://mdbootstrap.com/jquery/docs/?utm_campaign=PS&utm_source=Package"
            class="text-primary font-weight-bold">Free MDB UI Kit</a></p>
      </div>
      <div class="col-md-4 d-lg-block d-none">

        <div class="flex-right float-end">

          <!--Github-->
          <a href="https://github.com/mdbootstrap/mdb-ui-kit" class="pin-ic">
            <i class="fab fa-github fa-lg text-primary me-4"> </i>
          </a>
          <!-- Facebook -->
          <a href="https://www.facebook.com/mdbootstrap" class="fb-ic">
            <i class="fab fa-facebook-f fa-lg text-primary me-4"> </i>
          </a>
          <!-- Twitter -->
          <a class="tw-ic">
            <i href="https://twitter.com/mdbootstrap?lang=en" class="fab fa-twitter fa-lg text-primary me-4"> </i>
          </a>
          <!--Linkedin -->
          <a href="https://www.linkedin.com/company/material-design-for-bootstrap/" class="li-ic">
            <i class="fab fa-linkedin-in fa-lg text-primary me-4"> </i>
          </a>
          <!--Newsletter-->
          <a href="https://mdbootstrap.com/newsletter/" class="pin-ic">
            <i class="fas fa-envelope fa-lg text-primary"> </i>
          </a>

        </div>
      </div>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->
</body>

</html>
